<template>
    <div class="app-container">
        <el-form :model="form" label-width="130px" inline size="small">
            <el-form-item label="交强险开始日期" label-width="110px">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="交强险截止日期">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="综合保险到期">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="公司">
                <el-input v-model="form.region" placeholder="请输入公司名称"></el-input>
            </el-form-item>

            <el-form-item label="商业险开始日期">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="商业险截止日期" label-width="110px">
                <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="车牌号">
                <el-input v-model="form.region"></el-input>
            </el-form-item>

            <el-form-item label="审核">
                <el-select v-model="form.region" placeholder="">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label=" " label-width="100px">
                <el-button type="primary" icon="el-icon-search">查询</el-button>
                <el-button type="primary" plain>+ 新增</el-button>
                <el-button type="primary" plain>批量审核</el-button>
                <el-button type="primary" plain>批量取消审核</el-button>
                <el-button type="primary" plain>导出</el-button>
                <el-button type="info" plain>清空条件</el-button>
            </el-form-item>
        </el-form>

        <div class="mt-1" style="height: 640px;">
            <el-table :data="tableData" border height="100%">
                <el-table-column label="序号" width="90" type="index" align="center">
                </el-table-column>
                <el-table-column prop="name" label="全选" type="selection" align="center" width="90">

                </el-table-column>
                <el-table-column prop="sure" label="审核" width="120" align="center">
                    <template slot-scope="scope">
                        <!-- color: #4d4de2;cursor: pointer; -->
                        <span :style="{ 'color': scope.row.sure ? '#4d4de2' : '', 'cursor': 'pointer' }"
                            @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_car.html')">{{
                                scope.row.sure ? "已审核" : "未审核" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="120" align="center">
                </el-table-column>
                <el-table-column prop="car" label="车牌号" width="120" align="center">
                    <template slot-scope="scope">
                        <span style="color: #4d4de2;cursor: pointer;"
                            @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_car.html')">{{
                                scope.row.car }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="val" label="车身价" width="120" align="center">
                </el-table-column>
                <el-table-column prop="safemoney" label="保费" width="120" align="center">
                </el-table-column>
                <el-table-column prop="safecompany" label="公司名" width="120" align="center">
                </el-table-column>
                <el-table-column prop="orderMoney" label="强险费用" width="120" align="center">
                </el-table-column>
                <el-table-column prop="ordersafesdate" label="交强险起" width="120" align="center">
                </el-table-column>
                <el-table-column prop="ordersafeedate" label="交强险止" width="120" align="center">
                </el-table-column>
                <el-table-column prop="busMoney" label="商业险费用" width="120" align="center">
                </el-table-column>
                <el-table-column prop="busafesdate" label="商业险起" width="120" align="center">
                </el-table-column>
                <el-table-column prop="busafeedate" label="商业险止" width="120" align="center">
                </el-table-column>
                <el-table-column label="保单图片" width="120" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgSrcs" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="editer" label="录入人" width="120" align="center">
                </el-table-column>
                <el-table-column prop="address" label="操作" width="120" fixed="right" align="center">
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagin">
            <el-pagination background :current-page="1" :page-sizes="[20, 50, 100, 150]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-size="initParams.pageSize" />
        </div>
    </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-24 09:53:58  星期五
* @description   车辆保险
**/
import { insureAPI } from '@/api/adminstare'
export default {
    data() {
        return {
            form: {
                region: "",
            },
            tableData: [],
            initParams: {
                action: "carSafeList",
                page: 1,
                pageSize: 20,
            },
            // 分页总条数
            total: 0,
        }
    },
    mounted() {
        this.getListData()
    },
    methods: {
        async getListData() {
            const result = await insureAPI(this.initParams)
            this.total = result.total
            this.tableData = result.data
            console.log(result);

        },

        //  跳旧版详情
        go(val, URL) {
            const redirectUrl = `${URL}?car=${val.car}&aid=${this.$store.getters.userInfo.jxid}`
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            this.$oldLoginSystem(redirectUrl, url)
        },

        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getListData();
        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getListData();
        },
    }
}
</script>

<style lang="scss" scoped></style>